<template>
  <div id="app">
    <!-- 这里会根据url的地址不同，就渲染不同的页面，不用引入其他的组件
    out-in:控制出场再入场。appear:默认会有动画效果-->
    <transition
      mode="out-in"
      appear
      enter-active-class="animated bounceInUp"
      leave-active-class="animated bounceOutDown"
    >
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
// 引入各部组件 底部文件NavBar.vue
import NavBar from "./components/NavBar/NavBar";
export default {
  // 暴露App,还有这个局部底部组件
  name: "App",

  components: {
    NavBar: NavBar
  }
};
</script>

// 告诉style 我的模型是scss
<style lang="scss">
@import "./style/base.scss";
</style>
